<template>
	<!-- 添加供应商 -->
	<div class="article-manager video-icon form-submit" id="shopp-manager">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title" class="acea-row row-middle">
					<router-link :to="{ path: `${roterPre}/activity/index` }">
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">{{$t('page.product.back')}}</span>
						</div>
					</router-link>
					<span v-text="$route.params.id ? $t('page.activity.event_details') : $t('page.activity.event_details')" class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="formValidate" :model="formValidate" :label-width="120">
				<FormItem :label="$t('page.activity.active_name')" prop="name">
					<p>{{formValidate.name + $t('page.activity.activity_name')}}</p>
				</FormItem>
				<FormItem :label="$t('page.activity.type')" prop="type">
					<p>{{getTypeText(formValidate.type)}}</p>
				</FormItem>
				<FormItem :label="$t('page.activity.status')" prop="status">
					<p>{{getStatusText(formValidate.status)}}</p>
				</FormItem>
				<FormItem :label="$t('page.activity.start')" prop="start_time">
					{{ formatDate(formValidate.start_time) || '加载中...' }}
				</FormItem>
				<FormItem :label="$t('page.activity.end')" prop="end_time">
					{{ formatDate(formValidate.end_time) || '加载中...' }}
				</FormItem>
				<FormItem :label="$t('page.activity.requirement')" prop="requirements">
					{{formValidate.requirements}}
				</FormItem>
				<Button v-if="formValidate.status == 1" type="primary" @click="openNewModal()">{{$t('page.activity.register')}}</Button>
				<!-- <Button type="primary" @click="openModal()">报名</Button> -->
				<!-- <select-goods ref="selectGoods"  :visible.sync="modalVisible" :activity-id="currentActivityId"></select-goods> -->
			</Form>
			<!-- <Table ref="table" row-key="id" :load-data="handleLoadData" :columns="columns" :data="data" class="ivu-mt">
				<template slot="status" slot-scope="{ row }">
				    <p>{{getProductStatusText(row.status)}}</p>
				  </template>
				<template slot="image" slot-scope="{ row }">
				    <viewer>
				      <div class="tabBox_img">
				        <img v-lazy="row.image" width="50" />
				      </div>
				    </viewer>
				  </template>
				<template slot-scope="{ row, index }" slot="action">
					<a @click="editActivity(row)">编辑</a>
				</template>
			</Table> -->
			<Table 
			    ref="table" 
			    row-key="id" 
			    :load-data="handleLoadData" 
			    :columns="columns" 
			    :data="data" 
			    :row-class-name="rowClassName"
			    class="ivu-mt"
			  >
			    <template slot="status" slot-scope="{ row }">
			      <p>{{getProductStatusText(row.status)}}</p>
			    </template>
			    <template slot="image" slot-scope="{ row }">
			      <viewer>
			        <div class="tabBox_img">
			          <img v-lazy="row.image" width="50" />
			        </div>
			      </viewer>
			    </template>
			    <template slot-scope="{ row, index }" slot="action">
			      <a 
			        @click="editActivity(row)" 
			        :class="{ 'disabled-action': row.status === -1 }"
			      >
			        {{$t('page.product.edit')}}
			      </a>
			    </template>
			  </Table>
		</Card>
		<Card :bordered="false" dis-hover class="fixed-card"
			:style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }">
			<Form>
				<FormItem>
					<!-- <Button v-if="formValidate.status == 1" type="primary" class="submission" @click="handleSubmit('formValidate')">{{$t('page.product.save')}}</Button> -->
					<Button type="primary" class="submission" @click="close()">{{$t('page.activity.close')}}</Button>
				</FormItem>
			</Form>
		</Card>
		<new-select-good ref="newSelectGood"  :visible.sync="newSelectGoodVisible" :activity-id="currentActivityId" @success="handleSuccess"></new-select-good>
		<activity-good-info ref="activityGoodInfo"  :visible.sync="goodInfoVisible" :activity-good-id="activityGoodId"></activity-good-info>
		<!-- <select-goods ref="selectGoods"  :visible.sync="modalVisible"></select-goods> -->
	</div>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getActivityDetail,
		getActivityGoodsListApi
	} from '@/api/capital'
	import Setting from "@/setting";
	import selectGoods from '../components/selectGoods';
	import newSelectGood from '../components/newSelectGood';
	import activityGoodInfo from '../components/activityGoodInfo';
	export default {
		name: '',
		components: {
			selectGoods,
			newSelectGood,
			activityGoodInfo
		},
		props: {},
		data() {
			return {
				modalVisible: false,
				newSelectGoodVisible:false,
				goodInfoVisible:false,
				currentActivityId:0,
				activityGoodId:0,
				// columns: [{
				// 		title: 'ID',
				// 		key: 'id',
				// 		tree: true
				// 	},
				// 	{
				// 		title: '商品名',
				// 		key: 'good_name'
				// 	},
				// 	{
				// 		title: '商品图',
				// 		slot: 'image'
				// 	},
				// 	{
				// 		title: '审核状态',
				// 		slot: 'status'
				// 	},
				// 	{
				// 		title: '备注',
				// 		key: 'remark'
				// 	},
				// 	{
				// 		title: "操作",
				// 		slot: "action",
				// 		fixed: "right",
				// 		minWidth: 150,
				// 	}
				// ],
				data: [],
				roterPre: Setting.roterPre,
				width: 150,
				addresData: [],
				formValidate: {
					auto_generate: 0,
					end_time: '',
					id: 0,
					name: '',
					requirements: '',
					start_time: '',
					status: 0,
					type: 1,
				},
			}
		},
		computed: {
			...mapState('admin/layout', ['isMobile', 'menuCollapse']),
			labelPosition() {
				return this.isMobile ? 'top' : 'right'
			},
			columns() {
				return [{
						title: 'ID',
						key: 'id',
						tree: true
					},
					{
						title: $t('page.product.product_name'),
						key: 'good_name'
					},
					{
						title: $t('page.product.image'),
						slot: 'image'
					},
					{
						title: $t('page.product.audit'),
						slot: 'status'
					},
					{
						title: $t('page.stock.note'),
						key: 'remark'
					},
					{
						title: $t('page.activity.operation'),
						slot: "action",
						fixed: "right",
						minWidth: 150,
					}
				]
			}
		},
		watch: {},
		created() {
			if (this.$route.params.id) {
				this.currentActivityId = this.$route.params.id
				this.getSupplier()
				this.getActivityGoodsList()
			}
		},
		mounted() {},
		methods: {
			handleSuccess() {
			        // 重新加载数据
			        // this.getData();
					this.getSupplier()
					this.getActivityGoodsList()
			        // 或者其他刷新操作
			    },
			rowClassName(row, index) {
			      if (row.status === -1) {
			        return 'disabled-row';
			      }
			      return '';
			    },
			    editActivity(row) {
			      if (row.status === -1) {
			        this.$Message.warning($t('page.activity.disable_product'));
			        return;
			      }
			      // 正常的编辑逻辑
			    },
			close(){
				this.$router.push({ path: this.roterPre + '/activity/index' })
			},
			editActivity(row){
				this.activityGoodId = row.id
				this.goodInfoVisible = true
			},
			getActivityGoodsList() {
				//获取供应活动商品
				getActivityGoodsListApi(this.currentActivityId)
					.then(async (res) => {
						this.data = res.data.info
					})
					.catch((res) => {
						this.$Message.error(res.msg)
					})
			},
			openNewModal(){
				this.newSelectGoodVisible = true;
			},
			openModal() {
			    this.modalVisible = true;
			},
			handleLoadData(item, callback) {
				setTimeout(() => {
					const data = [{
							id: '10100',
							name: 'John Brown',
							age: 18,
							address: 'New York No. 1 Lake Park'
						},
						{
							id: '10101',
							name: 'Joe Blackn',
							age: 30,
							address: 'Sydney No. 1 Lake Park'
						}
					];
					callback(data);
				}, 2000);
			},
			formatDate(dateTimeString) {
				if (!dateTimeString) return '';

				const date = new Date(dateTimeString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},
			// 获取状态文本
			getStatusText(status) {

				const statusMap = {
					0: $t('page.activity.no_start'),
					1: $t('page.activity.sign_up'),
					2: $t('page.activity.activity'),
					3: $t('page.activity.end')
				};
				return statusMap[status] || status;
			},

			getTypeText(status) {

				const statusMap = {
					1: $t('page.activity.new'),
					2: $t('page.activity.promotion'),
				};
				return statusMap[status] || status;
			},
			getProductStatusText(status) {

				const statusMap = {
					"-1":$t('page.product.failure'),
					0: $t('page.product.pending'),
					1: $t('page.product.request_approved'),
					2: $t('page.product.request_decline')
				};
				return statusMap[status] || status;
			},
			handleSubmit() {
				this.$refs.formValidate.validate((valid) => {
					if (valid) {
						// 表单验证通过，执行提交逻辑
						if (this.$route.params.id) {
							createCustomerInformationApi(this.$route.params.id, this.formValidate)
								.then((res) => {
									this.$Message.success(res.msg)
									this.$router.push({
										path: this.roterPre + '/supplier/customer-information/list'
									})
								})
								.catch((res) => {
									this.$Message.error(res.msg)
								})
						} else {
							createCustomerInformationApi(0, this.formValidate)
								.then((res) => {
									this.$Message.success(res.msg)
									this.$router.push({
										path: this.roterPre + '/supplier/customer-information/list'
									})
								})
								.catch((res) => {
									this.$Message.error(res.msg)
								})
						}
					} else {
						this.$Message.error('请填写完整的必填信息！')
					}
				})
			},
			// 获取供应商信息
			getSupplier() {
				getActivityDetail(this.$route.params.id)
					.then(async (res) => {
						this.formValidate = res.data.info
					})
					.catch((res) => {
						this.$Message.error(res.msg)
					})
			},
		},
	}
</script>
<style scoped lang="less">
	.fixed-card {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 200px;
		z-index: 99;
		box-shadow: 0 -1px 2px rgb(240, 240, 240);
	}

	.submission {
		margin-left: 50%;
	}
	.disabled-row {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	.ivu-table .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	/* 如果没有scoped，可以不用深度选择器 */
	.ivu-mt .disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.ivu-mt .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	/* 如果样式是scoped的，则使用深度选择器 */
	/* 使用 /deep/ （适用于 less/sass） */
	.ivu-mt /deep/ .disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.ivu-mt /deep/ .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	/* 或者使用 ::v-deep （适用于 sass） */
	.ivu-mt ::v-deep .disabled-row td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
	
	.ivu-mt ::v-deep .disabled-row:hover td {
	  background-color: #f5f5f5 !important;
	  color: #c0c4cc !important;
	}
</style>